<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>鑫脉络购物商城</title>
		<meta http-equiv="pragma" content="no-cache"> 
	    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 
	    <meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css" />
	</head>

	<body>

		<style>
			.mui-col-xs-4 {
				width: 50%;
			}
			/*选项卡*/
			.mui-control-content {
				background-color: #F9F9F9;
			}
			.div-ul {
				position: relative;
				min-height: 475px;
				background-color: #fff;
			}
			.div-li {position: relative; border: 2px solid #F3F3F3;}
			.staff-info {width: 100%; height: 90px; background-color: #FFFFFF; position: relative;}
			.staff-info .goods-image-div {display: inline-block; margin-top: 14px; margin-left: 40px;}
			.staff-info .goods-image-div .goods-image {width: 63px !important; height: 63px;}
			.staff-info .goods-info {position: absolute; left: 115px; top: 24px;}
			.staff-info .goods-info .goods-name {font-size: 17px; color: #838383; font-family: "PingFang-SC-Regular";}
			.staff-info .goods-info .goods-specifications {font-size: 13px; color: #838383; font-family: "PingFang-SC-Regular";}
			.staff-info .goods-info .goods-price {font-size: 13px; color: #838383; font-family: "PingFang-SC-Regular";}
			.staff-info .goods-info .goods-price span{color: #EC6B44;}
			.staff-info .review-info-div {display: inline-block; float: right; margin-top: 24px; margin-right: 30px;}
			.staff-info .review-info-div .review-ratio {font-size: 15px; color: #838383; font-family: "PingFang-SC-Regular";}
			.staff-info .review-info-div .review-ratio span{color: #EC6941;}
			.staff-info .review-info-div .review-num {text-align:right; font-size: 10px; color: #838383; font-family: "PingFang-SC-Regular";}
			
			input[type="radio"]{-webkit-appearance:none;outline: none;border-width: 0px;}
			input.check{background:url(../img/goods/select_norm_icon.png) no-repeat center left;background-size:20px 20px;position:absolute;top:50%;left:10px;margin-top:-18px;width:35px;height:35px;}
			input.check:checked{background:url(../img/goods/selected_icon.png) no-repeat center left;background-size:20px 20px;}
			input.goodsCheck:checked{background:url(../img/goods/selected_icon.png) no-repeat center left;background-size:20px 20px;}
			input.check:checked{background:url(../img/goods/selected_icon.png) no-repeat center left;background-size:20px 20px;}
			.checked{background:url(../img/goods/selected_icon.png) no-repeat left center;background-size:20px 20px;position:absolute;top:50%;left:15px;margin-top:-18px;width:35px;height:35px;}
			
			.review-div{width: 100%;}
			.review-info{padding:13px 30px 0px 40px;position:relative;}
			.review-info .review-info-img{width: 100%;}
			.review-info .review-info-img img{width:30px !important;height:30px;border-radius: 15px;}
			.review-info .review-info-img span{vertical-align: super; font-size: 17px; color: #838383; margin-left: 8px; font-family: "PingFang-SC-Regular";}
			.star-div{position: absolute; right: 30px; top: 22px;}
			.star-div .star-icon{width: 16px !important; height: 16px;}
			.review-info .review-info-text{ margin-right: 5px;}
			.review-info .review-info-text div{font-size:15px; color: #454545; font-family: "PingFang-SC-Regular";}
			.review-info .review-info-text .shop-brief{line-height:18px;font-size:12px;color:#454545;font-family: "PingFang-SC-Regular";}
			.review-info .review-info-text .shop-brief span{display:inline-block;}
			.review-info .review-info-text .shop-price{margin-top: 5px; height:24px;line-height:24px;position:relative;}
			.review-info .review-info-text .shop-price .shop-pices {color:#8B8B8B;font-size:12px;font-family: "PingFang-SC-Regular";}
			
			.line-div {width: 100%; height: 1px; background-color: #E5E5E5;}
			.empty_list {
				display: none;
			    font-size: 15px;
			    line-height: 40px;
			    color: #777;
				margin-top: 20px;
				text-align: center;
			}
			.goods-technicianID {
				display: none;
			}
			.slider-div {
				margin-top: 50px;
			    margin-bottom: 49px;
				display:none;
			}
			.tab-container {
				width: 100%;
				height: 150px;
				background-size: 100% 100%;
			}
			.merchant-container {
				width: 100%;
				height: 150px;
				position: absolute;
				top: 0;
				left: 0;
				background-color: rgba(0,0,0,0.3);
			}
			.merchant-info {
				width: 100%;
				height: 80px;
				position: absolute;
				top: 70px;
				left: 0;
			}
			.merchant-logo {
				width: 40px;
				height: 40px;
				float: left;
				margin-left: 10px;
				margin-right: 10px;
			}
			.merchant-name {
				font-size: 14px;
				color: #FFFFFF;
				font-weight: 500;
				line-height: 40px;
			}
			.info-div {
				margin-top: 10px;
			}
			.merchant-addr {
				font-size: 12px;
				color: #FFFFFF;
				margin-left: 10px;
			}
			.merchant-phone {
				font-size: 12px;
				color: #FFFFFF;
				float: right;
			    margin-top: 2px;
    				margin-right: 10px;
			}
			.special-goods-ID-hide, .special-merchant-ID-hide {
				display: none;
			}
		</style>
		<div class="mui-content">
			<div class="tab-container">
				<div class="merchant-container">
					<div class="merchant-info">
						<img class="merchant-logo" />
						<div class="merchant-name"></div>
						<div class="info-div">
							<span class="merchant-addr"></span>
							<span class="merchant-phone"></span>
						</div>
					</div>
				</div>
			</div>
			<ul id="specialul" class="mui-table-view mui-grid-view">
		        <!--<li class="mui-table-view-cell mui-media mui-col-xs-6">
	                <div class="mui-media-object">
	                		<img class="special-image" src="../img/index/tuijian_bg.png" />
	                		<div class="special-info-div">
	                			<div class="special-text">夹心蒸蛋糕</div>
	                			<div class="special-collect-div">
	                				<img class="collect-icon" src="../img/index/chihuo_icon.png" />
	                				<span class="collect-span">333人</span>
	                			</div>
	                		</div>
	                		<div class="special-info-div">
	                			<div class="special-price">25.80¥</div>
	                			<div class="add-shopping-car-div"></div>
	                		</div>
	                	</div>
		        </li>-->
		   </ul>
			<div class="common-back-div">
				<img class="common-back-img" src="../img/common/public_back.png" />
			</div>
		</div>
		<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
		<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
		<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
		<script type="text/javascript" src="../js/utils/boot.js" ></script>
		<script>
			var userID = base.getParameter("userID");
			var merchantID = base.getParameter("merchantID");
			$(function() {
				base.setWait('正在获取数据...');
				var url = base.url.getMerchantGoods;
				var data = {
					userID: userID,
					merchantID:merchantID
				};
				base.postData(url,data,getMerchantGoodsSuccess);
			})
			function getMerchantGoodsSuccess(data) {
				base.clearWait();
				if (data.success) {
					$(".tab-container").css("background-image","url("+data.context.merchantUrl+")");
					$(".merchant-logo").attr("src", data.context.merchantLogo);
					$(".merchant-name").text(data.context.merchantName);
					$(".merchant-addr").text("地址："+data.context.merchantAddress);
					$(".merchant-phone").text("电话："+data.context.merchantPhone);
					showList(data.context.merchantGoodsList);
				} else {
					mui.toast(data.msg);
				}
			}
			function showList(list) {
				var html = '';
				for (var i in list) {
					html += getGoodsListItem(list[i], i);
				}
				$("#specialul").html(html);
			}
			function getGoodsListItem(item, index) {
				var html = '';
				html += '<li class="mui-table-view-cell mui-media mui-col-xs-6" data-index="' + index + '">'
				html += '	<div class="mui-media-object">'
				html += '		<img class="special-image" src="'+item.goodsImg+'" />'
				html += '		<div class="special-info-div">'
				html += '			<div class="special-text">'+(item.goodsName.length>7?(item.goodsName.substring(0, 6)+'...'):item.goodsName)+'</div>'
				html += '			<div class="special-goods-ID-hide">'+item.goodsID+'</div>'
				html += '			<div class="special-merchant-ID-hide">'+item.merchantID+'</div>'
				html += '			<div class="special-collect-div">'
				html += '				<img class="collect-icon" src="../img/common/hot_icon.png" />'
				html += '				<span class="collect-span">'+item.popularity+'人</span>'
				html += '			</div>'
				html += '		</div>'
				html += '		<div class="special-info-div">'
				html += '			<div class="special-price">'+(item.price/100)+'¥</div>'
				html += '			<div class="add-shopping-car-div"></div>'
				html += '		</div>'
				html += '	</div>'
				html += '</li>'
				return html;
			}
			$("#specialul").on("tap", ".mui-table-view-cell", function() {
				var _goodsID = $(this).find(".special-goods-ID-hide").text();
				var _merchantID = $(this).find(".special-merchant-ID-hide").text();
				parent.location.href = 'goodsDetail.html?userID='+userID+'&goodsID='+_goodsID+'&merchantID='+_merchantID;
			})
		    $(".common-back-div").on('tap','.common-back-img',function(){
				mui.back();
			});
		</script>

	</body>

</html>